==========================================
Connecting to the CSUSB JupyterHub Server
==========================================

Updated: 10-05-2022

* This instruction is for those who want to their local VS-Code to (remotely) use the CSUSB JupyterHub server. This is different from running a Jupyter stack that contains VS Code. 

* This instruction is based on https://blog.jupyter.org/connect-to-a-jupyterhub-from-visual-studio-code-ed7ed3a31bcb.

Required items 
~~~~~~~~~~~~~~~~

We need to the followings. 

1. (Server) A running container. 

#. (Server) A *valid* token, see below.

#. (Local) VS-code with the ``Jupyter`` extension installed.

For item 1, see xxx, and for item 3, see xxx.

Below, we will explain how to generate a token and how to connect to the CSUSB JupyterHub using the token. 


Generate a JupyterLab Token
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1. Click on the ``File`` tab.

   .. image:: images/vs-code-remote-connect/filetab.png
     :width: 500
     :alt: Alternative text



#. Select ``Hub Control Panel``.

#. Click on ``Token``.

   .. image:: images/vs-code-remote-connect/menu.png
     :width: 500
     :alt: Alternative text

#. You may assign any name for your token. 

   .. image:: images/vs-code-remote-connect/token-generate.png
     :width: 500
     :alt: Alternative text

   .. note:: 

        Tokens are more or less your password. Anyone having your token can access your server. Do not share this information in public. If not sure, revoke it when done.

Connect to a remote server
~~~~~~~~~~~~~~~~~~~~~~~~~~

#. Open your VS-Code. 

#. Open an ipynb file. 

#. Use ``!hostname`` to check your current kernel. Currently, it is local.

   .. image:: images/vs-code-remote-connect/hostname-local.png
     :width: 500
     :alt: Alternative text

#. Open the palette and type ``Jupyter:``; see how to here https://docs.github.com/en/codespaces/codespaces-reference/using-the-vs-code-command-palette-in-codespaces.

   .. image:: images/vs-code-remote-connect/jupyter-server-connections-option.png
     :width: 500
     :alt: Alternative text

#. Choose ``Jupyter: Specify Jupyter Server for Connections``.

#. Choose ``Existing`` 

   .. image:: images/vs-code-remote-connect/choose-existing.png
     :width: 500
     :alt: Alternative text

#. Type the following in the box ``https://csusb-jupyter.nrp-nautilus.io/user/<your email address>?token=<your token>``. 

   .. image:: images/vs-code-remote-connect/enter-uri.png
     :width: 500
     :alt: Alternative text

   .. note:: 

    For the first type of the URI, you can copy it from CSUSB JupyterHub. In your server, click the URL box and copy the necessary part. 

   .. image:: images/vs-code-remote-connect/get-url.png
      :width: 400
      :alt: Alternative text

#. Lastly, run ``!hostname`` to check the current kernel. If it is still connected to the last one, see the following images.

   .. image:: images/vs-code-remote-connect/not-changed.png
     :width: 500
     :alt: Alternative text

  Click on the current kernel, in the photo it is ``main (Python 3.9.13)`` located at the upper right corner. 

   .. image:: images/vs-code-remote-connect/connected-select.png
     :width: 500
     :alt: Alternative text

  Now, choose the ``(Remote) Jupyter Kernel``

   .. image:: images/vs-code-remote-connect/good-to-go.png
     :width: 500
     :alt: Alternative text

  We are good to go.
   
   
.. ``https://csusb-jupyter.nrp-nautilus.io/user/<your email address>?token=<your token>``

.. #. Check you are connected to the server with `!hostname`.


.. #. Follow the :ref:`Step <Image Selection>` as above.